<template>
  <div class="flowCanvas" style="position: relative; width: 100vw; height: 100vh; background: #fff">
    <!-- 画布容器，铺满整个页面 -->
    <div
      class="container"
      ref="container"
      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%"
    ></div>
    <!-- 节点面板，固定在左上角 -->
    <div style="position: absolute; left: 10px; top: 10px; z-index: 10">
      <CustomNodePanel v-if="lf" :lf="lf" />
    </div>
    <!-- 数据面板，固定在左下角 -->
    <div style="position: absolute; left: 30px; bottom: 20px; z-index: 20">
      <BpmnDataPanel v-if="lf" :lf="lf" class="bpmn-data-panel" style="width: auto; height: auto" />
    </div>
    <!-- 工具栏，固定在右上角 -->
    <div style="position: absolute; right: 50px; top: 20px; z-index: 500">
      <!-- 这里可以插入自定义的工具栏组件或内容，如有需要 -->
      <!-- 例如：<CustomToolbar v-if="lf" :lf="lf" /> -->
    </div>
    <!-- 弹窗编辑 -->
    <el-drawer title="编辑节点" :modal="false" v-model="drawer" :direction="'rtl'">
      <div>节点ID: {{ currentNode?.data?.id }}</div>
      <div>节点名称:<input v-model="nodeText" /></div>
      <div>
        角色名称:
        <el-select v-model="value" placeholder="Select" size="large" style="width: 240px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div><button type="button" @click="handlerSetPropValue">保存</button></div>
    </el-drawer>
  </div>
</template>

<script>
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
import {
  BpmnElement,
  BpmnXmlAdapter,
  Snapshot,
  Control,
  Menu,
  SelectionSelect
} from '@logicflow/extension'
import '@logicflow/extension/lib/style/index.css'
import CustomNodePanel from './components/CustomNodePanel.vue'
import BpmnDataPanel from './components/BpnmDataPanel.vue'

export default {
  name: 'logicflowCustom',
  data() {
    return {
      lf: null,
      drawer: false,
      currentNode: null,
      value: '',
      nodeText: '',
      options: [
        {
          value: 'Option1',
          label: 'Option1'
        },
        {
          value: 'Option2',
          label: 'Option2'
        },
        {
          value: 'Option3',
          label: 'Option3'
        },
        {
          value: 'Option4',
          label: 'Option4'
        },
        {
          value: 'Option5',
          label: 'Option5'
        }
      ]
    }
  },
  components: { CustomNodePanel, BpmnDataPanel },

  mounted() {
    LogicFlow.use(BpmnElement)
    LogicFlow.use(BpmnXmlAdapter)
    LogicFlow.use(Snapshot)
    LogicFlow.use(Control)
    LogicFlow.use(Menu)
    LogicFlow.use(SelectionSelect)
    //初始化
    this.lf = new LogicFlow({
      container: this.$refs.container,
      grid: {
        size: 10,
        visible: true,
        type: 'mesh',
        config: {
          color: '#ababab',
          thickness: 1
        }
      }
    })
    this.lf.render()
    //绑定事件
    const { eventCenter } = this.lf.graphModel
    this.bindEvent(eventCenter)
  },

  methods: {
    bindEvent(eventCenter) {
      eventCenter.on('node:click', (args) => {
        console.log('节点单击', args)
        this.drawer = true
        this.currentNode = args
        this.nodeText = this.currentNode.data.text.value
      })
    },
    handlerSetPropValue() {
      debugger
      this.lf.setProperties(this.currentNode.data.id, {
        PropValue: this.value //this.currentNode.data.properties.PropValue
      })
      this.lf.graphModel.updateText(this.currentNode.data.id, this.nodeText)
      //this.lf.currentNode.data.text.value = this.nodeText;
    }
  }
}
</script>

<style>
.flowCanvas {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0px;
  display: flex;
}

.flowCanvas .container {
  display: flex;
  flex-grow: 1;
  /*铺满剩余空间*/
  border: 3px solid #ababab;
  overflow: hidden;
}
</style>
